<template>
    <div>
        <el-card style="border: 0px;margin: 10px 0px 0px 0px" shadow="never">
            <template slot="header">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-input v-model="params.classesName" placeholder="按班级名称查询" clearable :maxlength="10" show-word-limit style="width: 220px;margin-right: 5px"  />
                        <el-select v-model="params.subSchoolId" placeholder="按所属校区查询" clearable style="width: 220px;margin-right: 5px">
                            <el-option v-for="subSchool in subSchoolList" :key="subSchool.id" :value="subSchool.id" :label="subSchool.label"></el-option>
                        </el-select>

                        <el-select v-model="params.vocationalId" placeholder="按所属专业查询" clearable style="width: 220px;margin-right: 5px">
                            <el-option v-for="vocational in vocationalList" :key="vocational.id" :value="vocational.id" :label="vocational.label"></el-option>
                        </el-select>

                        <el-select v-model="params.stageId" placeholder="按所属阶段查询" clearable style="width: 220px;margin-right: 5px">
                            <el-option v-for="stage in stageList" :key="stage.id" :value="stage.id" :label="stage.label"></el-option>
                        </el-select>

                        <el-date-picker v-model="params.startDate" value-format="yyyy-MM-dd" start-placeholder="开班日期" end-placeholder="区间结束" type="daterange" style="width: 220px;margin-right: 5px">
                        </el-date-picker>

                        <el-date-picker v-model="params.endDate" value-format="yyyy-MM-dd" start-placeholder="结课日期" end-placeholder="区间结束" type="daterange" style="width: 220px;margin-right: 5px">
                        </el-date-picker>

                        <el-date-picker v-model="params.overDate" value-format="yyyy-MM-dd" start-placeholder="毕业日期" end-placeholder="区间结束" type="daterange" style="width: 220px;margin-right: 5px">
                        </el-date-picker>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 10px">
                    <el-col :span="24">
                        <el-button icon="el-icon-plus" type="primary" plain @click="openClassesChildWindow('classesChild',null)">新增班级</el-button>
                        <el-button icon="el-icon-c-scale-to-original" plain type="success" @click="openClassesChildWindow('classesChild',null)">执行合班</el-button>
                        <el-button icon="el-icon-date" plain type="warning" @click="openClassesChildWindow('classesChild',null)">执行分班</el-button>
                    </el-col>
                </el-row>


            </template>

            <el-table :data="classesList" :height="500" @selection-change="selectionChange" size="mini" v-loading="loading" element-loading-text="玩命加载中...请稍后...." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 1)" :header-cell-style="{fontSize:'12px'}">
                <el-table-column type="selection" align="center"  label="序号"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-popover placement="top-start" width="600" trigger="click">
                            <el-button size="mini" type="primary" icon="el-icon-edit" @click="openClassesChildWindow('classesChild',scope.row)">修改</el-button>
                            <el-button size="mini" type="success" icon="el-icon-edit-outline">升学</el-button>
                            <el-button size="mini" type="danger" icon="el-icon-finished">毕业</el-button>
                            <el-button slot="reference" icon="el-icon-setting" size="mini">操作</el-button>
                        </el-popover>

                    </template>
                </el-table-column>
                <el-table-column prop="classesName" label="班级名称" align="center" sortable></el-table-column>
                <el-table-column prop="teacherNames" label="带班教师" align="center">
                    <template slot-scope="scope">
                        <el-popover placement="right" width="600" trigger="click">
                            <el-card style="border: 0px" shadow="never">
                                <template slot="header">
                                    <el-button size="mini" type="primary" icon="el-icon-sort" @click="openAppointTeacherWindow('classesAppointTeacherChild',scope.row)">指定教师</el-button>
                                </template>
                                <el-table :data="teacherList" stripe size="mini">
                                    <el-table-column property="jyName" label="教员" align="center"></el-table-column>
                                    <el-table-column property="bzrName" label="班主任" align="center"></el-table-column>
                                    <el-table-column property="teacherStartTime" label="开始日期" align="center">
                                        <template slot-scope="ss">
                                            {{$YEAR_MONTH_DAY(ss.row.teacherStartTime)}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column property="teacherEndTime" label="结束日期" align="center">
                                        <template slot-scope="ss">
                                            {{ss.row.teacherEndTime ? $YEAR_MONTH_DAY(ss.row.teacherEndTime) : '-'}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column property="type" label="状态" align="center">
                                        <template slot-scope="ss">
                                            <el-tag style="width: 100%;height: 100%;" :type="ss.row.type == '1' ? 'success' : 'warning'">
                                                {{ss.row.type == '1' ? '进行中' : '已完成'}}
                                            </el-tag>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-card>
                            <el-button type="text" size="mini" slot="reference" v-loading.fullscreen.lock="fullscreenLoading" @click="handleShowTeachers(scope.row)">查看</el-button>
                        </el-popover>

                    </template>
                </el-table-column>
                <el-table-column label="人员" align="center">
                    <el-table-column prop="personCount" label="原始人数" align="center" sortable></el-table-column>
                    <el-table-column prop="newPersonCount" label="现有人数" align="center" sortable></el-table-column>
                </el-table-column>
                <el-table-column label="校区专业" align="center">
                    <el-table-column prop="subSchoolName" label="所属校区" align="center" sortable></el-table-column>
                    <el-table-column prop="vocationalName" label="所属专业" align="center" sortable></el-table-column>
                    <el-table-column prop="stageName" label="所属阶段" align="center" sortable></el-table-column>
                </el-table-column>
                <el-table-column label="日期相关" align="center">
                    <el-table-column prop="startTime" label="开班日期" align="center">
                        <template slot-scope="scope">
                            {{$YEAR_MONTH_DAY(scope.row.startTime)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="endTime" label="结课日期" align="center">
                        <template slot-scope="scope">
                            {{$YEAR_MONTH_DAY(scope.row.endTime)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="overTime" label="毕业日期" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.overTime ? $YEAR_MONTH_DAY(scope.row.overTime) : '-'}}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column prop="classesStatus" label="状态" align="center">
                    <template slot-scope="scope">
                        <el-tag style="width: 100%;height: 100%;" :type="scope.row.classesStatus == '1' ? 'primary' : ( scope.row.classesStatus == '2' ? 'danger' : 'success')">
                            {{scope.row.classesStatus == '1' ? '进行中' : ( scope.row.classesStatus == '2' ? '已合班' : '已毕业')}}
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    layout="total,prev,pager,next"
                    :total="params.total"
                    :page-size="params.size"
                    :current-page="params.page"
                    :hide-on-single-page="false"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
            ></el-pagination>
        </el-card>

        <classes-child ref="classesChild"></classes-child>
        <classes-appoint-teacher-child ref="classesAppointTeacherChild"></classes-appoint-teacher-child>
    </div>
</template>

<script>

    import { getClassesList,handleShowTeachers } from '@/api/quality/classes'
    import { searchAllSubSchool } from '@/api/principal/school-manager/school'
    import { searchAllVocationalList } from '@/api/principal/school-manager/vocational'
    import { searchAllStageList } from '@/api/principal/school-manager/stage'
    export default {
        name: "classes-index",
        components:{
            ClassesChild:()=>import("@/views/quality/classes-manager/classes-child.vue"),
            classesAppointTeacherChild:()=>import("@/views/quality/classes-manager/classes-appoint-teacher-child.vue")
        },
        data(){
            return {
                classesList:[],
                subSchoolList:[],
                vocationalList:[],
                teacherList:[],
                stageList:[],
                tableSelectionList:[],
                loading:false,
                fullscreenLoading:false,
                params:{page:1,size:8,total:0}
            }
        },
        methods:{
            handlePageChange(page){
                this.params.page = page;
                this.getClassesList(this.params);
            },
            handleSizeChange(size){
                this.params.size = size;
                this.getClassesList(this.params);
            },
            getClassesList(data){
                getClassesList(data).then(res=>{
                    this.classesList = res.data.data.rows;
                    this.params.total = res.data.data.total;
                    this.loading = false;
                })
            },
            openClassesChildWindow(name,data){
                if(data){
                    this.$refs[name].classes = data;
                }else{
                    this.$refs[name].classes = {};
                }
                this.$refs[name].value = true;
            },
            selectionChange(val){
                this.tableSelectionList = val;
            },
            handleShowTeachers(row){
                this.teacherList = [];
                this.fullscreenLoading = true;
                handleShowTeachers(row).then(res=>{
                    this.teacherList = res.data.data;
                    this.fullscreenLoading = false;
                })
            },
            openAppointTeacherWindow(name,data){

                if(data.classesStatus != '1'){
                    this.$message.error({message:'非进行中的班级无法操作',center:true});
                    return false;
                }

                this.$refs[name].data = {};
                this.$refs[name].parent = data;
                this.$refs[name].value = true;
            }
        },
        computed:{
          computed_vocational_list(){
              let data = this.casVocationalList;
              data.forEach(school=>{
                  if(school && school.children){
                      school.children.forEach(subSchool=>{
                          if(subSchool && subSchool.vocationalChildren){
                            subSchool.children = subSchool.vocationalChildren;
                          }
                      })
                  }
              });
              return data;
          }
        },
        created(){
            this.getClassesList(this.params);
            searchAllSubSchool().then(res=>{
                this.subSchoolList = [];
                this.subSchoolList = res.data.data;
            });
            searchAllVocationalList().then(res=>{
                this.vocationalList = [];
                this.vocationalList = res.data.data;
            });
            searchAllStageList().then(res=>{
                this.stageList = [];
                this.stageList = res.data.data;
            });
        }
    }
</script>

<style scoped>

</style>